<template>
  <div class="HomePage">
    <el-card class="home-card">
      <el-row>
        <el-col :span="24">
          <h2>首页</h2>
        </el-col>
      </el-row>
      <el-row :gutter="35">
        <el-col :span="24">
          <div class="top">
            <!--商品种类-->
            <Product_Class ></Product_Class>
            <!--商品轮播图-->
            <Home_Photo></Home_Photo>
            <!--我的信息-->
            <Home_Info ></Home_Info>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!--热门商品-->
    <div>
      <Home_Product></Home_Product>
    </div>

    <div>
      <!--农技学堂-->
      <Home_AgrLearning></Home_AgrLearning>
    </div>
  </div>
</template>

<script setup>

import Product_Class from "@/views/HomePage/Product_Class.vue";
import Home_Photo from "@/views/HomePage/Home_Photo.vue";
import Home_Info from "@/views/HomePage/Home_Info.vue";
import Home_Product from "@/views/HomePage/Home_Product.vue";
import Home_AgrLearning from "@/views/HomePage/Home_AgrLearning.vue";

</script>

<style lang="less" scoped>
.HomePage{
  display:inline-grid;//垂直排列
  width: auto;
  max-width: 1200px;
}

.home-card{
  width: auto;
  height: auto;
  background-color: white;
  margin-bottom: 20px;
}

.top{
  display: flex;
  justify-content: space-between;
}

.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
  display: inline-grid;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
